<template>
    <h3>当前求和：{{sum}}</h3>
    <button @click="sum++">sum++</button>
    <hr>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{job.j1.salary}}k</h2>
    <h2>汽车：{{person.car}}</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age+=1">修改年龄</button>
    <button @click="job.j1.salary+=1">涨工资</button>
    <br>
    <br>
    <button @click="showRawPerson">输出最原始的person</button>
    <button @click="addCar">给人添加一台车</button>
    <button @click="person.car.price++">加价</button>
</template>

<script>
    import {ref,reactive,toRefs,toRaw,markRaw} from "vue"
    
export default {
    name:"Demo",
    setup(){
        //数据
        let sum = ref(0);
        let person = reactive({
            name:"张三",
            age:18,
            job:{
                j1:{
                    salary:20,
                }
            },
        });

        //将一个对象变为普通对象，非响应式的,只对reactive有效
        function showRawPerson(){
            console.log(toRaw(person));
            console.log(toRaw(sum));
        }

        //标记一个对象，使其永远不会成为响应式
        function addCar(){
            let car = {
                name:"benzi",
                price:40,
            };
            person.car = markRaw(car);
        }

        //返回一个对象(常用)
        return{
            ...toRefs(person),
            sum,
            showRawPerson,
            addCar,
            person,
        }
    }
}
</script>


